<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <div th:replace="common/common::html"></div>
  <meta charset="UTF-8">
  <title th:text="#{department.info}">Title>Title</title>

  <script th:inline="javascript">
    var _gridWidth;
    var _gridHeight;
    //页面自适应
    function resizePageSize(){
      _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
      _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
    }
    $(function () {
      resizePageSize();
      var _columnWidth = _gridWidth/3;
      $("#flexigrid-id").flexigrid({
        width : _gridWidth,
        height : _gridHeight,
        url : /*[[@{getDepartmentInfolistByPage}]]*/"",
        dataType : 'json',
        colModel : [
          {display : 'depUuid',name : 'depUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
          //{display : /*[[#{department.name}]]*/"",name : 'branchName',width : _columnWidth, sortable : true,align : 'center'},
          {display : /*[[#{department.branchName}]]*/"",name : 'branchName',width : _columnWidth, sortable : true,align : 'center'},
          {display : /*[[#{department.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
          // {display : /*[[#{department.modtime}]]*/"",name : 'modtime',width : _columnWidth, sortable : true,align : 'center'},
          {display : /*[[#{common.operation}]]*/"",name : 'depUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
              var htmlContent = '<a href="#" onclick="deleteUser(\''+ v + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
              return htmlContent
            }}


        ],
        resizable : false, //resizable table是否可伸缩
        useRp : true,
        usepager : true, //是否分页
        autoload : false, //自动加载，即第一次发起ajax请求
        hideOnSubmit : true, //是否在回调时显示遮盖
        showcheckbox : true, //是否显示多选框
        //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
        rowbinddata : true
      });

      queryBtn();

      $("#query-btn-id").click(function (event) {
        event.stopPropagation();
        queryBtn();
      })

      $("#allocate-btn-id").click(function (event) {
        event.stopPropagation()
        //$("#allocate-dialog-id").dialog('open')
        allocateZtreeDep();

      });

      /**
       * 部门增加
       */
      // 增加按钮点击事件
      $("#add-department-id").click(function (event) {
        event.stopPropagation()
        $("#add-department-form-id").dialog('open')
      });

      // 增加
      $("#add-department-form-id").dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: /*[[#{department.add.tip.title}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function() {
              $("#add-department-form-id").submit()
            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function() {
              $( this ).dialog( "close" );
            }
          },
        ]
      });
      $("#add-department-form-id").ajaxForm({
        dataType: "json",
        success : function(data) {
          message(data.msg);
          $("#add-department-form-id").dialog('close')
          queryBtn();
        },
        error : function() {
          message(/*[[#{common.error}]]*/'');
        },
        complete : function(response, status) {

        }

      })

      /**
       * 分配
       */
      //部门分配点击事件
      $("#allocate-dep-btn-id").click(function (event) {
        event.stopPropagation()
        //$("#allocate-dialog-id").dialog('open')
        allocateZtreeDep();
      });

      $("#allocate-dep-dialog-id").dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: /*[[#{user.dep.allocate}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function() {
              var userUuid = $("#allocate-dep-dialog-id").attr("depUUid");
              var depUuids = [];
              var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
              var nodes = ztreeObj.getCheckedNodes(true);
              $(nodes).each(function (index,item) {
                depUuids.push(item.id);
              });

              $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{saveRoleByUserId}]]*/'',
                    data: [
                      {name:"userUuid",value:userUuid},
                      {name:"depUuids",value:depUuids}
                    ],
                    success: function (data) {
                      message(data.msg);
                      $("#allocate-dialog-id").dialog('close');
                    },
                    error: function(msg){
                      message(/*[[#{common.error}]]*/'');
                    }
                  }
              );
            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function() {
              $( this ).dialog( "close" );
            }
          },
        ]
      });

    });//ready

    function queryBtn() {
      var searchBranchName = $("#search-department-name-id").val();
      $("#flexigrid-id").flexOptions({
        extParam:[
          {name:"searchBranchName",value:searchBranchName}
        ]
      }).flexReload();
    }


    var allocateSetting = {
      check: {
        enable: true
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };

    function allocateZtreeDep() {
      var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
      if(ids.length !== 1){
        message(/*[[#{common.select.one}]]*/'');
        return;
      }

      $("#allocate-dialog-id").attr("depUuid",ids);

      $.ajax({
            type: 'post',
            async: false,
            dataType : 'json',
            url: /*[[@{getMenuZtreeListByDepartmentId}]]*/'',
            data: [{name:"depUuid",value:ids}],
            success: function (data) {
              $.fn.zTree.init($("#allocate-department-ztree"), allocateSetting, data);
              $("#allocate-dialog-id").dialog('open');
            },
            error: function(msg){
              message(/*[[#{common.error}]]*/'');
            }
          }
      );

    }

  </script>
</head>
<body>
<div>
  <span th:text="#{department.info}"></span>
  <input type="text" id="search-department-name-id" th:placeholder="#{department.name}">

  <a href="#" id="query-btn-id" class="navbar-btn">
    <i class="glyphicon glyphicon-zoom-in"></i>
    <span th:text="#{common.query}"></span>
  </a>
</div>

<!--    &lt;!&ndash; Unnamed (HTML Button) &ndash;&gt;-->
<!--    <div id="u51" class="ax_html_button">-->
<!--        <input id="u51_input" type="submit" value="解绑"/>-->
<!--    </div>-->

<!--    &lt;!&ndash; Unnamed (HTML Button) &ndash;&gt;-->
<!--    <div id="u52" class="ax_html_button">-->
<!--        <input id="u52_input" type="submit" value="绑定"/>-->
<!--    </div>-->

<!--    &lt;!&ndash; Unnamed (HTML Button) &ndash;&gt;-->
<!--    <div id="u53" class="ax_html_button">-->
<!--        <input id="u53_input" type="submit" value="删除"/>-->
<!--    </div>-->

<!--    &lt;!&ndash; Unnamed (HTML Button) &ndash;&gt;-->
<!--    <div id="u54" class="ax_html_button">-->
<!--        <input id="u54_input" type="submit" value="新增"/>-->
<!--    </div>-->

<!--    &lt;!&ndash; Unnamed (HTML Button) &ndash;&gt;-->
<!--    <div id="u100" class="ax_html_button">-->
<!--        <input id="u100_input" type="submit" value="修改"/>-->
<!--    </div>-->
<div>
  <!--    增加按钮-->
  <a href="#" id="add-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-plus"></i>
    <span th:text="#{department.add}"></span>
  </a>
  <!--    删除按钮-->
  <a href="#" id="del-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-minus"></i>
    <span th:text="#{department.del}"></span>
  </a>
  <!--    修改按钮-->
  <a href="#" id="recompose-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-pencil"></i>
    <span th:text="#{department.recompose}"></span>
  </a>
  <!--    绑定按钮-->
  <a href="#" id="bound-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-resize-small"></i>
    <span th:text="#{department.bound}"></span>
  </a>
  <!--    解绑按钮-->
  <a href="#" id="rebound-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-resize-full"></i>
    <span th:text="#{department.rebound}"></span>
  </a>
  <!--    对于无部门的员工：分配部门按钮-->
  <a href="#" id="allot-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-edit"></i>
    <span th:text="#{department.allot}"></span>
  </a>
  <!--    对于有部门的员工：切换部门按钮-->
  <a href="#" id="switch-department-id" class="navbar-btn">
    <i class="glyphicon glyphicon-share"></i>
    <span th:text="#{department.switch}"></span>
  </a>

</div>
<div>
  <!--创建对话框-->
  <div id="add-department-dialog-id" style="display: none">
    <form id="add-department-form-id" th:action="@{addDepartmentById}" method="post">
      <div class="form-group">
        <span th:text="#{department.add.name}"></span>
        <input class="form-control" type="text" id="add-department-name" name="branchName" th:placeholder="#{department.add.name}">
      </div>
      <div class="form-group">
        <span th:text="#{department.add.remark}"></span>
        <input class="form-control" type="text" id="add-department-remark" name="remarks" th:placeholder="#{department.remarks}">
      </div>

    </form>
  </div>

  <table id="flexigrid-id"></table>
</div>


</body>
</html>